<template>
    <div class="index-box">
     <el-form class="formBox" :model="user" label-position="right" :rules="rules" ref="user">

       <el-form-item label="用户名:" prop="userName" label-width="125px">
           <el-input v-model="user.userName" autocomplete="off" ></el-input>
       </el-form-item>
       <el-form-item label="登录密码:" prop="password" label-width="125px">
         <el-input v-model="user.password" autocomplete="off" type="password"></el-input>
       </el-form-item>
       <el-form-item label="确认密码:" prop="surePassword" label-width="125px" class="address-box">
           <el-input v-model="user.surePassword" autocomplete="off" type="password"></el-input>
       </el-form-item>
       <el-form-item label="商家:" prop="storeId" label-width="125px">
          <el-select filterable clearable v-model="user.storeId" placeholder="商家">
            <el-option :label="item.name" :value="item.storeId" v-for="item in storeList"></el-option>
          </el-select>
       </el-form-item>

       <el-form-item  label-width="125px">
         <el-button type="primary" @click="submitUser('user')" :loading="userLoading">新 增</el-button>
       </el-form-item>
     </el-form>
    </div>
</template>

<script>
  import { isCard,isPhone,isEmail } from '../../common/validate.js';
  import {
    storeUserGetAllStore,storeUserInitStoreUser
  } from '@/api/getData'
	export default {
		name: 'addStoreAccount',
		data() {
      var validatePass = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请再次输入密码'));
        } else if (value !== this.user.password) {
          callback(new Error('两次输入密码不一致!'));
        } else {
          callback();
        }
      };
			return {
        loading:false,
        userLoading:false,
				user: {
          userName:'',
          password: '',
          surePassword: '',
          storeId:''
				},
        storeList:[],
				/*		表单数据		*/
        rules: {
        	userName: [{required: true,message: '请输入用户名',trigger: 'blur'}],
          password: [{required: true,message: '请输入用户密码',trigger: 'blur'}],
          surePassword: [{required: true,validator: validatePass,trigger: 'blur'}],
          storeId: [{required: true,message: '请选择状态',trigger: 'blur'}],
        }
			}
		},
		mounted() {
			this.getSelect();
		},

		methods: {
			/*		初始化			*/
      async getSelect() {
        try {
          const result = await storeUserGetAllStore();
          if (result.code == 200) {
            this.storeList = result.data;
          } else {
            this.$message.error(result.msg);
          }
        } catch (err) {
          console.log(err)
        }
      },
      submitUser(formName) {
        /*添加用户*/
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.userLoading = true;
            storeUserInitStoreUser(this.user).then((result) => {
              if (result.code == 200) {
                this.$message.success(result.msg);
              } else {
                this.$message.error(result.msg);
              }
              this.userLoading = false;
            });
          }
        })
      },

		}
	}
</script>

<style lang="scss" scoped>
    .formBox{
      width:50%;
      margin:auto;
      margin-top:50px;
    }
</style>
